<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" persistent scrollable max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">转移部门</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <div class="d-flex align-center px-3 pt-2">
            <label style="width: 140px" class="text-right pr-3">选择部门</label>
            <v-menu
              v-model="openMenu"
              :close-on-content-click="false"
              :nudge-width="200"
              :max-width="500"
            >
              <template v-slot:activator="{ on, attrs }">
                <v-text-field
                  v-model="deptName"
                  placeholder="请输入"
                  readonly
                  v-bind="attrs"
                  v-on="on"
                ></v-text-field>
              </template>
              <v-card>
                <v-card-text>
                  <v-text-field
                    v-model="filterText"
                    label="输入关键字进行过滤"
                    flat
                    hide-details
                    outlined
                    clearable
                    dense
                    clear-icon="mdi-close-circle-outline"
                    class="mb-2"
                  ></v-text-field>
                  <el-tree
                    :data="deptList"
                    :props="{
                      children: 'childs',
                      label: 'name'
                    }"
                    default-expand-all
                    :highlight-current="true"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    @node-click="handleSelectionDept"
                    ref="tree">
                  </el-tree>
                </v-card-text>
              </v-card>
            </v-menu>
          </div>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text @click="dialog = false">{{ $t('actions.cancel') }}</v-btn>
          <v-btn color="primary" text :disabled="!department_id" @click="ok">{{ $t('actions.ok') }}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
import { mapState } from 'vuex'
import { moveToDept } from '@/api/organization'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    ids: [String, Array]
  },
  computed: {
    ...mapState('organization', ['deptList']),
    dialog: {
      get() {
        return this.show
      },
      set(bool) {
        this.$emit('update:show', bool)
      }
    }
  },
  data() {
    return {
      openMenu: false,
      filterText: '',
      deptName: '',
      department_id: undefined
    }
  },
  watch: {
    show(bool) {
      if (bool) {
        this.deptName = ''
        this.department_id = ''
        this.filterText = ''
        if (!this.deptList.length) {
          this.$store.dispatch('organization/getDeptList', {page: 1, limit: 500})
        }
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name ? data.name.indexOf(value) !== -1 : data.title.indexOf(value) !== -1;
    },
    handleSelectionDept(data) {
      this.department_id = data.id
      this.deptName = data.name
      this.openMenu = false
    },
    ok() {
      moveToDept({id: this.ids, department_id: this.department_id}).then(() => {
        this.$message.success('success')
        this.$emit('success')
        this.dialog = false
      })
    }
  }
}
</script>

<style>

</style>